<template>
  <div class="tagSelect">
    <div class="tag_l">
      <el-tag
        v-for="(item, index) in tags"
        :key="item.id"
        :closable="item.name !== 'index'"
        :effect="
          $route.name === item.name || tags.length <= 1 ? 'dark' : 'plain'
        "
        @click="changeTag(item)"
        @close="handelClose(item, index)"
      >
        {{ item.label }}
      </el-tag>
    </div>
    <el-tag
      :closable="true"
      effect="dark"
      @click="changeTagAll"
      @close="changeTagAll"
      color="tag_show"
      v-if="tags.length >= 2"
    >
      全部关闭
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "tagSelect",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabList,
    }),
  },
  methods: {
    ...mapMutations(["closeTag", "closeTagAll",]),
    // 点击tag跳转功能
    changeTag(item) {
      this.$router.push(item.name);
    },
    // 更新数据
    handelClose(item, index) {
      // 调用mapMutations中 closeTag函数
      this.closeTag(item);
      const length = this.tags.length;
      // 删除之后的逻辑
      if (item.name !== this.$route.name) {
        return;
      }
      if (index === length) {
        // 删除最后一项
        this.$router.push({
          name: this.tags[index - 1].name,
        });
      } else {
        this.$router.push({
          name: this.tags[index].name,
        });
      }
    },
    changeTagAll() {
      this.$nextTick(function () {
        this.closeTagAll();
      });
      this.$router.push("/index");
    },
  },
};
</script>

<style lang="less" scoped>
.tagSelect {
  display: flex;
  justify-content: space-between;
  margin: 20px 20px 0 20px;
  .tag_l {
    .el-tag {
      margin-right: 10px;
    }
  }
}
</style>
